<template>
  <view class="flex-row">
    <easy-cacheimage :image-src="item.picUrl" class="service-img margin-right-24" mode="aspectFill"/>
    <view class="flex-row align-center justify-between flex-item">
      <view class="flex-column">
        <text class="text-28 color-t1 text-bold margin-bottom-20">{{ item.serviceName }}</text>

        <view class="text-22 color-t2 margin-bottom-10">
          <text>{{ item.presentation }}</text>
        </view>

        <view class="flex-row">
          <view class="price margin-right-20">
            <text class="text-22">￥</text>
            <text class="text-34 text-bold">{{ item.price }}</text>
          </view>

          <view class="flex-row align-center">
            <image src="/static/time.png" class="time" />
            <text class="text-22 color-t2">{{ item.serviceDuration }}分钟</text>
          </view>
        </view>
      </view>

      <by-button width="140rpx" height="60rpx" text="去预约" bold @click="jump('/pages/subscribe/index?tno=' + tno + '&serviceNo=' + item.serviceNo)"/>
    </view>
  </view>
</template>

<script setup lang="ts">
import type { AnyObject } from '@/common/types'
import { jump } from '@/common/util'

interface IProps{
  item: AnyObject,
  tno: string
}

withDefaults(defineProps<IProps>(), {
  item: () => ({}),
  tno: ''
})
</script>

<style scoped lang="scss">
@include setMargin(right, 24);

@include setMargin(top, 34);

.service-img{
  width: 140rpx;
  height: 140rpx;
  border-radius: 10rpx;
  margin-top: 6rpx;
  overflow: hidden;
}

.price{
  color: #F45300;
}

.time{
  width: 22rpx;
  height: 22rpx;
  margin-right:6rpx;
}
</style>
